<template>
  <div>
     <div>
      <h1>字典数据</h1>
    </div>
    <el-form :inline="true">
      <el-row>
        <el-col :span="6">
          <el-form-item label="字典名称：">
            <el-select
              v-model="selectData.dictType"
              placeholder="请选择字典名称"
              style="width: 200px"
            >
              <el-option
                v-for="item in dictTypeOptions"
                :key="item.dictType"
                :label="item.dictName"
                :value="item.dictType"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="字典标签：">
            <el-input
              v-model="selectData.label"
              placeholder="请输入字典类型"
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="请选择状态：">
            <el-select v-model="selectData.status" style="width: 200px">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getDictDataList">查询</el-button>
          <el-button type="primary" @click="resetHandler">重置</el-button>
          <el-button type="primary" @click="openAddDialog">新增</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData" stripe style="width: 100%" v-loading="dataLoading" element-loading-text="拼命加载中">
      <el-table-column prop="dictCode" label="字典编码" align="center" />
      <el-table-column prop="label" label="字典标签" align="center" />
      <el-table-column prop="dictValue" label="字典键值" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0" type="success">启用</el-tag>
          <el-tag v-else-if="scope.row.status == 1" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="openUpdateDialog(scope.row)"
            >修改</el-button
          >

          <el-button
            v-if="scope.row.status == 0"
            size="mini"
            type="danger"
            @click="updateDictDataStatusHandler(scope.row)"
            >禁用</el-button
          >
          <el-button
            v-if="scope.row.status == 1"
            size="mini"
            type="primary"
            @click="updateDictDataStatusHandler(scope.row)"
            >启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="selectData.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="selectData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 新增弹窗 -->
    <el-dialog
      title="添加字典数据"
      width="30%"
      :visible.sync="addDialogVisible"
    >
      <el-form>
        <el-form-item label="字典类型：">
          <el-input v-model="addData.dictType" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="标签：">
          <el-input v-model="addData.label"></el-input>
        </el-form-item>
        <el-form-item label="键值：">
          <el-input v-model="addData.dictValue"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="addData.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addDictDataHandler">提交</el-button>
        <el-button @click="cancelAddDictDataHanlder">取消</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog
      title="修改字典数据"
      width="30%"
      :visible.sync="updateDialogVisible"
    >
      <el-form>
        <el-form-item label="字典类型：">
          <el-input v-model="updataData.dictType" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="标签：">
          <el-input v-model="updataData.label"></el-input>
        </el-form-item>
        <el-form-item label="键值：">
          <el-input v-model="updataData.dictValue"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="updataData.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updataDictDataHandler"
          >提交</el-button
        >
        <el-button @click="cancelUpdataDictDataHanlder">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllDictType,
  getDictData,
  addDictData,
  updateDictData,
  updateDictDataStatus
} from "@/api/dict";
export default {
  data() {
    return {
      //加载状态
      dataLoading:false,
      dictTypeOptions: [],
      statusOptions: [
        { value: 0, label: "正常" },
        { value: 1, label: "禁用" },
      ],
      updataData: {
        dictCode: null,
        dictType: null,
        label: null,
        dictValue: null,
        remark: null,
      },
      addData: {
        dictType: null,
        label: null,
        dictValue: null,
        remark: null,
      },
      selectData: {
        dictName: null,
        dictType: null,
        label: null,
        status: "",
        currentPage: 1, //当前页
        pageSize: 5, //每页大小
      },
      total: 0,
      tableData: [],
      addDialogVisible: false,
      updateDialogVisible: false,
    };
  },
  methods: {
    //修改字典类型状态
    updateDictDataStatusHandler(row) {
      this.$confirm(
        `此操作将修改字典编码为${row.dictCode}的状态, 是否继续?`,
        "温馨提示",
        {
          confirmButtonText: "确定修改",
          cancelButtonText: "取消修改",
        }
      )
        .then(() => {
          const statusData = {
            dictCode: row.dictCode,
            status: row.status === 0 ? 1 : 0,
          };
          updateDictDataStatus(statusData).then((res) => {
            this.updateDialogVisible = false;
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getDictDataList();
            }
          });
        })
        .catch(() => {});
    },
    //取消修改字典数据按钮
    cancelUpdataDictDataHanlder() {
      this.updateDialogVisible = false;
    },
    //修改确定的按钮
    updataDictDataHandler() {
      this.$confirm(
        `此操作将修改编码为${this.updataData.dictCode}的字典数据, 是否继续?`,
        "温馨提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      )
        .then(() => {
          updateDictData(this.updataData).then((res) => {
            this.updateDialogVisible = false;
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getDictDataList();
            }
          });
        })
        .catch(() => {});
    },
    //打开修改弹窗的方法
    openUpdateDialog(row) {
      this.updataData.dictCode = row.dictCode;
      this.updataData.dictType = row.dictType;
      this.updataData.label = row.label;
      this.updataData.dictValue = row.dictValue;
      this.updataData.remark = row.remark;
      this.updateDialogVisible = true;
    },
    //取消新增字典数据按钮
    cancelAddDictDataHanlder() {
      this.addDialogVisible = false;
    },
    //新增确定的按钮
    addDictDataHandler() {
      this.$confirm(`此操作将新增字典数据, 是否继续?`, "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          addDictData(this.addData).then((res) => {
            this.addDialogVisible = false;
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.getDictDataList();
            }
          });
        })
        .catch(() => {});
    },
    //打开新增弹窗
    openAddDialog() {
      this.addData.dictType = this.selectData.dictType;
      this.addDialogVisible = true;
    },
    //重置
    resetHandler() {
      this.selectData.label = null;
      this.selectData.status = "";
      this.getDictDataList();
    },
    // 获取字典数据列表
    getDictDataList() {
      //开启加载动画
      this.dataLoading=true;
      return getDictData(this.selectData)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.selectData.currentPage = res.data.pageNum
          //关闭加载动画
          this.dataLoading=false;
        })
        .catch(() => {});
    },
    // 获取所有字典类型
    getDictTypeList() {
      //开启加载动画
      this.dataLoading=true;
      return getAllDictType()
        .then((res) => {
          this.dictTypeOptions = res.data;
          if (this.selectData.dictName) {
            const target = this.dictTypeOptions.find(
              (item) => item.dictName === this.selectData.dictName
            );
            if (target) {
              this.selectData.dictType = target.dictType;
            }
          }
          //关闭加载动画
          this.dataLoading=false;
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.selectData.pageSize = val;
      this.getDictTypeHandler();
    },
    handleCurrentChange(val) {
      this.selectData.currentPage = val;
      this.getDictTypeHandler();
    },
  },
  created() {
    const { dictId, dictName } = this.$route.query;
    this.selectData.dictId = dictId;
    this.selectData.dictName = dictName;
    this.getDictTypeList().then(() => {
      this.getDictDataList();
    });
  },
};
</script>

<style>
</style>